
const loveList = document.querySelector('#loveList');
async function getLoveList() {
  const url = `https://www.fastmock.site/mock/b601d916dd19beeb4038a29e632c86a5/love/list`
  const response = await fetch(url)
  const list = await response.json()
  for (let i = 0; i < list.length; i++) {
    if(list[i].static === 0) {
      const html = `
            <div class="card" style="background-color: transparent;">
              <div class="card-header p-1" id="heading${i}" style="background-color: transparent;">
                <h2 class="mb-0">
                  <span class="btn collapsed ml-auto d-flex align-items-center" type="button" data-toggle="collapse"
                        data-target="#collapse${i}" aria-expanded="false" aria-controls="collapse${i}">
                      <img class="statusIcon" src="https://zblh.gitee.io/pyramid/lovelist/images/todo.svg" alt="">
                      <strong>${list[i].text}</strong>
                  </span>
                </h2>
              </div>
              <div id="collapse${i}" class="collapse" aria-labelledby="heading${i}" data-parent="#loveList">
                <div class="card-body p-0">
                  <div class="lover-card-title" style="padding:10px 8px 10px 8px;">未完成</div>
                </div>
              </div>
            </div>
          `
      loveList.innerHTML += html;
    }else if (list[i].static === 1) {
      const html = `
            <div class="card" style="background-color: transparent;">
              <div class="card-header p-1" id="heading${i}" style="background-color: transparent;">
                <h2 class="mb-0">
                  <span class="btn collapsed ml-auto d-flex align-items-center" type="button" data-toggle="collapse" data-target="#collapse${i}" aria-expanded="false" aria-controls="collapse${i}">
                    <img class="statusIcon" src="https://zblh.gitee.io/pyramid/lovelist/images/ok.svg">
                    <strong>${list[i].text}</strong>
                  </span>
                </h2>
              </div>
              <div id="collapse${i}" class="collapse" aria-labelledby="heading${i}" data-parent="#loveList">
                <div class="card-body p-0">
                  <div class="lover-card-title" style="padding:10px 8px 10px 8px;">完成时间：${list[i].time}</div>
                </div>
              </div>
            </div>
          `;
      loveList.innerHTML += html;
    }
  }
}
getLoveList()
